<!--
传入参数：
imgUploadPath：上传路径
uploadImgData：附带参数
icon：中间显示图标
width.height:长宽。传数字。默认90
showImgPath：展示图片路径
 -->
<template>
<Upload type="drag" :action="imgUploadPath" accept="image/png,image/jpeg,image/jpg" :data="uploadImgData" :show-upload-list="false" :before-upload="beforeUpload" :headers="{'Access-Control-Allow-Origin':'*'}" :on-success="uploadSuccess" :on-error="uploadError"
    :on-progress="uploadProgressFunc" :format="['jpg','jpeg','png','gif']" :on-format-error="handleFormatError" :max-size="1024" :on-exceeded-size="handleMaxSize" class="upload-box" :style="{'width':width + 'px','height':height+'px'}">
	<slot>
		<img :src="imgPath.indexOf(http) > -1 ?imgPath : postUrl.imgPath + (imgPath)" alt="" v-if="imgPath">
		<Icon :type="icon" class="camera-icon" size="50" color="rgba(0,0,0,.2)" v-if="!imgPath"></Icon>
		<div class="suggest-tip-text" v-if="!imgPath">{{suggest}}</div>
		<div slot="tip" class="tip-text">
			上传图片
			<p>{{suggest}}</p>
		</div>
		<transition name="fade">
			<div class="progress" v-if="isUploading">
				<span>
                     {{uploadProgress || 0}}%
                </span>
			</div>
		</transition>
	</slot>
</Upload>
</template>
<script>
export default {
	name: 'headerImgUploader',
	props: {
		imgUploadPath: {
			type: String,
			default: ""
		},
		uploadImgData: {
			type: Object,
			default: function() {
				return {};
			}
		},
		icon: {
			type: String,
			default: "android-camera"
		},
		width: {
			type: Number,
			default: 90
		},
		height: {
			type: Number,
			default: 90
		},
		suggest: {
			type: String,
			default: "建议尺寸1:1"
		},
		showImgPath: {
			type: String,
			default: function() {
				return ''
			}
		}
	},
	data() {
		return {
			isUploading: false,
			uploadProgress: 0,
			imgPath: ''
		};
	},
	methods: {
		uploadSuccess(data) {
			if (data.code > -1) {
				this.imgPath = data.data;
				this.$emit('on-upload-success', data.data)
			} else {
				this.errorHandle(data.msg);
			}
			this.isUploading = false;
		},
		uploadError(e) {
			console.log("error", e);
			this.isUploading = false;
			this.errorHandle();
		},
		beforeUpload() {
			this.uploadProgress = 0;
			this.isUploading = true;
			return true;
		},
		uploadProgressFunc(event) {
			this.uploadProgress = Math.round(event.percent);
		},
		handleFormatError() {
			this.isUploading = false;
			this.errorHandle("请选择正确的图片！");
		},
		handleMaxSize() {
			this.isUploading = false;
			this.errorHandle("图片超出大小限制！");
		}
	},
	watch: {
		showImgPath(val) {
			if (val !== this.imgPath) {
				this.imgPath = val
			}
		},
	}
};
</script>
<style lang="scss">
.upload-box {
    display: inline-block;
    .camera-icon {
        width: 90px;
        height: 90px;
        &:before {
            line-height: 90px;
        }
    }
    .tip-text {
        text-align: center;
        padding: 5px 0;
    }
    img {
        width: 90px;
        height: 90px;
    }
    .ivu-upload {

        .suggest-tip-text {
            display: none;
        }
        .ivu-upload-drag {
            height: 90px;
        }
    }
    .progress {
        text-align: center;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        justify-content: center;
        align-items: center;
        span {
            line-height: 90px;
            font-size: 24px;
            font-weight: 700;
            color: #9d9d9d;
        }
    }
}
.upload-box.auto-size-img-upload {
    width: 100% !important;
    height: auto !important;
    .tip-text {
        display: none;
    }
    .ivu-upload {
        height: auto;
        position: relative;
        .suggest-tip-text {
            display: block;
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 20px;
        }
        .ivu-icon {
            font-size: 60px !important;
            position: absolute;
            left: calc(50% - 45px);
            top: calc(50% - 45px);

        }
        img {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        &:before {
            content: '';
            display: inline-block;
            width: 1px;
            padding-bottom: 50%;
            float: left;
        }

        &:after {
            content: '';
            display: table;
            clear: both;
        }
    }
}
.upload-box.launcher-size-img-upload {
    .ivu-upload {
        &:before {
            padding-bottom: 180%;
        }
    }
}
</style>
